<template>
  <div class="container">
    <h1 class="tip">确认挂号信息</h1>
    <!-- 卡片：展示就诊人信息 -->
    <el-card class="box-card">
      <!-- 卡片的头部 -->
      <template #header>
        <div class="card-header">
          <span>请选择就诊人</span>
          <el-button class="button" type="primary" size="default" :icon="User">添加就诊人</el-button>
        </div>
      </template>
      <!-- 卡片的身体部分展示就诊人信息 -->
      <div class="user">
        <Visitor v-for="(user, index) in VisitsInfoAll" :key="user.id" class="item" :user="user" :index="index" :currentIndex="currentIndex"  @click="changeIndex(index)" />
      </div>
    </el-card>
    <!-- 底部展示医生的信息 -->
    <el-card class="box-card">
      <!-- 卡片头部 -->
      <template #header>
        <div class="card-header">
          <span>挂号信息</span>
        </div>
      </template>
      <!-- 卡片的身体部分：展示医生的信息-->
      <el-descriptions class="margin-top" :column="2" border>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">就诊日期：</div>
          </template>
          {{ docInfo.workDate }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">就诊医院：</div>
          </template>
          {{ docInfo.param?.hosname }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">就诊科室：</div>
          </template>
          {{ docInfo.param?.depname }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">医生姓名：</div>
          </template>
          {{ docInfo?.docname }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">医生职称：</div>
          </template>
          {{ docInfo.title }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">医生专长：</div>
          </template>
          {{ docInfo.skill }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">医生服务费：</div>
          </template>
          <span style="color: red">{{ docInfo.amount }}</span>
        </el-descriptions-item>
      </el-descriptions>
    </el-card>

    <!-- 确定挂号按钮 -->
    <div class="btn">
      <el-button type="primary" size="default" :disabled="currentIndex == -1 ? true : false">确定挂号</el-button>
    </div>
  </div>
</template>
  
<script setup lang="ts">
import { User } from "@element-plus/icons-vue";
import { ref, onMounted } from 'vue'
import { VisitsInfo,DocterInfo } from "@/api/hospitaldetails/index"
import type {VisitsInfoRes,DocterInfoData} from '@/api/hospitaldetails/type'
import { useRoute } from "vue-router";
// 获取路由对象
const $route = useRoute();
import type {VisitsInfoArr } from '@/api/hospitaldetails/type'
//就诊人信息
const VisitsInfoAll=ref<VisitsInfoArr>([])
//医生信息
const docInfo=ref<any>({})
// 存储用户确认就诊人索引值
const currentIndex = ref<number>(-1);
onMounted(() => {
  //获取就诊人信息
  getVisitsInfo()
  //获取医生信息
  getDocterInfo()
})
//获取就诊人信息
const getVisitsInfo = async () => {
  const res:VisitsInfoRes = await VisitsInfo()
  if(res.code===200){
    VisitsInfoAll.value=res.data
  }
}
//获取医生信息
const getDocterInfo=async () => {
  const res:DocterInfoData = await DocterInfo($route.query.docId as string)
  if(res.code===200){
    docInfo.value=res.data
  }
}
// 点击就诊人子组件的回调
const changeIndex = (index: number) => {
  // 存储当前用户选中就诊人信息索引值
  currentIndex.value = index;
};
</script>
  
<style scoped lang="less">
.container {
  .tip {
    font-weight: 900;
    color: #7f7f7f;
    font-size: 20px;
  }

  .box-card {
    margin: 20px 0px;

    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .user {
      display: flex;
      flex-wrap: wrap;

      .item {
        width: 32%;
        margin: 5px;
      }
    }
  }

  .btn {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
  }
}
</style>